<template>
  <div id="app">
    <!-- 直接引入图片 -->
    <Swiper :list="list" style="width: 800px" @change="change" />
    <!-- 自定义插槽 -->
    <Swiper :list="list2" style="width: 800px; margin-top: 40px">
      <div v-for="(i, index) in list2" :key="index" class="swiper2">
        {{ i }}
      </div>
    </Swiper>
  </div>
</template>

<script>
import Swiper from "./components/swiper.vue";
import img_1 from "./assets/img/img_1.png";
import img_2 from "./assets/img/img_2.png";

export default {
  name: "App",
  components: {
    Swiper,
  },
  data() {
    return {
      list: [img_1, img_2],
      list2: ["功能一", "功能二"],
    };
  },
  methods: {
    change(index) {
      console.log(index);
    },
  },
};
</script>

<style>
#app {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swiper2 {
  width: 100%;
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
